<template>
  <div class="goods">
    <!-- 导航面包屑 -->
    <bread :linktitle="link"></bread>
    <!-- 导航面包屑 -->
    <!-- 商品的列表 -->
    <div class="goods_wrap" v-if="tableData.length">
      <div class="search_wrap">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="text-align: left"
        >
          <el-form-item>
            <el-input
              v-model="http.params.query"
              @keyup.enter.native="searchgood"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchgood"
              ></el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addgood">添加商品</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" border style="width: 100%" height="400">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column
          prop="goods_name"
          label="商品名称"
          width="500"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="goods_price"
          label="商品价格(元)"
        ></el-table-column>
        <el-table-column prop="goods_number" label="商品数量"></el-table-column>
        <el-table-column prop="add_time" label="创建时间">
          <template slot-scope="time">
            {{ time.row.add_time | getyear }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="http.params.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="http.params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
        background
      >
      </el-pagination>
      <!-- 分页 -->
    </div>
    <!-- 商品的列表-->
  </div>
</template>

<script>
import minix from "../../minixs";
import { getyear } from "../../filter/index";
import bread from "../../common/breadcrumb";
export default {
  name: "goods",
  data() {
    return {
      http: {
        method: "get",
        url: "goods",
        params: {
          query: "",
          pagenum: 1,
          pagesize: 5
        }
      },
      type:'goods',
      link: ["商品管理", "商品列表"],
      tableData: [],
      
      totals: "",
      keywords: "" //查询商品关键字
    };
  },
  mixins: [minix],
  created() {
    // this.getgood();
    this.getList();
  },
  methods: {
    //获取商品列表数据
    async getgood() {
      let mes = await this.$http.get("goods", { params: this.http.params });
      console.log(mes);
      if (mes.meta.status !== 200)
        return this.$message.error("商品列表获取失败");
      this.tableData = mes.data.goods;
      this.totals = mes.data.total;
      console.log(this.tableData);
    },
    handleSizeChange(val) {
      this.http.params.pagesize = val;
      this.getgood();
    },
    handleCurrentChange(val) {
      this.http.params.pagenum = val;
      this.getgood();
    },
    //根据商品的名称查询商品
    searchgood() {
      this.getgood();
    },
    // 添加商品
    addgood() {
      this.$router.push("goods/add");
    }
  },
  components: {
    bread
  },
  filters: {
    getyear
  }
};
</script>
<style scoped>
.goods_wrap {
  background-color: #fff;
  margin: 10px 0;
  padding: 20px;
  box-sizing: border-box;
  height: 575px;
}
</style>
